<template>
	<view class="main">
		<tou_hand1 handtitle='临期sim卡列表'></tou_hand1>
		<view class="tap">
			<view class="tapone">
				<input placeholder="sim卡号" v-model="simCode" />
				<input placeholder="sim卡系统账号" v-model="simAccount" />
				<view class="taponetxt" @click="selbtn">查询</view>
			</view>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
			<van-cell v-for="(item, index) in blist" :key="index" >
				<view class="mone">
					<view class="monefirst">
						<view class="monefirstleft"><span class='monefirstlefttxt'>套餐：</span>{{item.packageName}}</view>
						<view class="monefirstleft"><span class='monefirstlefttxt'>价格（元）：</span>{{item.price}}</view>
						
					</view>
					<view class="monefirst">
						<view class="monefirstleft"><span class='monefirstlefttxt' style="width: 100%;">sim卡号：</span>{{item.simCode}}</view>
					</view>
					<view class="monefirst">
						<view class="monefirstleft" ><span class='monefirstlefttxt' style="width: 100%;">过期时间：</span>{{item.expireTime}}</view>
					</view>
					
					<view class="monefirst">
						<view class="monefirstleft" style="width: 100%;"><span class='monefirstlefttxt'>sim卡账号：</span>{{item.simAccount}}</view>
					</view>
				</view>
			</van-cell>
			</van-list>
			</van-pull-refresh>
		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	export default {
		components: {tou_hand1},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#fff')
		},

		data() {
			return {
				simCode:'',//sim卡号
				simAccount:'',//sim卡系统账号
				blist:[],//sim卡列表
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
			}
		},
		onLoad(option) {
			this.loadMore();
		},
		methods: {
			// 本区收益分页
			loadMore() {
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					simCode:that.simCode,
					simAccount:that.simAccount,
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					
				}
				that.loading = true;
				that.$base.request1('manager/simBindUser/simAdvent/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.blist = that.blist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			onRefresh() {
			  // 清空列表数据
			  this.finished = false;
			  this.pageNum=1
			  // 重新加载数据
			  // 将 loading 设置为 true，表示处于加载状态
			  this.loading = true;
			  this.loadMore();
			},
			selbtn(){
				this.blist = [];
				this.onRefresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.tap{
			padding: 0 32upx;
			box-sizing: border-box;
			/deep/.van-cell{
				line-height: 0upx;
				padding: 0upx;
				margin-top: 28upx;
				border: 1upx solid #bcbcbc;
				border-radius: 15upx;
			}
			/deep/.van-cell:not(:last-child)::after{
				border-bottom:0upx
			}
			/deep/.van-cell__value--alone{
				
			}
			.tapone{
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 20upx;
				
				input{
					width: 240upx;
					border: 2upx solid #333;
					padding: 10upx;
					border-radius: 10upx;
					margin-right: 20upx;
				}
				/deep/.uni-input-placeholder{
					font-size: 26upx;
					font-weight: 600;
				}
				/deep/.uni-input-input{
					font-size: 26upx;
					font-weight: 600;
				}
				.taponetxt{
					padding: 18upx 25upx;
					border-radius: 10upx;
					background-color: #4B98ED;
					font-size: 26upx;
					font-weight: 600;
					text-align: center;
					color: #FFFFFF;
					margin-left: 20upx;
				}
			}
			.mone{
				width: 100%;
				// box-shadow: 0upx 4upx 9upx 0upx rgba(44,44,44,0.21);
				box-sizing: border-box;
				padding: 15upx 25upx;
				// margin-top: 28upx;
				.monefirst{
					display: flex;
					.monefirstleft{
						width: 50%;
						line-height: 44upx;
						.monefirstlefttxt{
							
						}
					}
				}
			}
		}
	}
</style>
